<template>
  <section class="loginContainer" :style="bg">
    <div class="loginInner">
      <div class="login_header">
        <div class="login_header_title">
          <img src="./images/logo-1.png" alt="" style="width: 40%" />
        </div>
      </div>
      <div class="login_content">
        <form @submit.prevent="login">
          <section class="login_message">
            <input
              type="tel"
              maxlength="11"
              placeholder="用户名/手机号"
              v-model="username"
            />
          </section>
          <section class="login_verification">
            <input
              type="text"
              placeholder="密码"
              v-if="showpassword"
              v-model="password"
            />
            <input
              type="password"
              placeholder="密码"
              v-else
              v-model="password"
            />
            <div
              class="switch_button off"
              @click="showpassword = !showpassword"
            >
              <div class="switch_circle" :class="{ right: showpassword }"></div>
            </div>
          </section>
          <button class="login_submit">密码登录</button>
        </form>
        <van-tabs route animated color="#eee" background="#eee">
          <van-tab title="忘记密码？" to="#"></van-tab>
          <van-tab title="没有账户？去注册" to="/register"></van-tab>
        </van-tabs>
      </div>
    </div>
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip" />
  </section>
</template>

<script>
import AlertTip from "../../components/AlertTip/AlertTip";
import { reqLogin } from "../../api";
export default {
  data() {
    return {
      showpassword: false, //是否显示密码
      username: "", // 用户名
      password: "", // 密码
      alertText: "", // 提示文本
      alertShow: false, // 是否显示警告框
      bg: {
        backgroundImage: "url(" + require("./images/bg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },

  computed: {
    rightPhone() {
      return /^1\d{10}$/.test(this.email);
    },
  },
  components: {
    AlertTip,
  },
  methods: {
    showAlert(alertText) {
      this.alertShow = true;
      this.alertText = alertText;
    },
    // 异步登陆
    async login() {
      let result;
      // 前台表单验证
      const { username, password } = this;
      if (!this.username) {
        // 用户名必须指定
        this.showAlert("用户名必须指定");
        return;
      } else if (!this.password) {
        // 密码必须指定
        this.showAlert("密码必须指定");
        return;
      }
      result = await reqLogin({ username, password });
      // 根据结果数据处理
      if (result.code1 === 0) {
        if (localStorage.getItem("token") != " ") {
          localStorage.removeItem("token");
          localStorage.setItem("token", result.data.token);
          localStorage.removeItem("username");
          localStorage.setItem("username", result.data.username);
        }
        this.$store.dispatch("setToken", result.data.token);
        // 去个人中心界面
        this.$router.replace("/profile");
      } else {
        // 显示警告提示
        const msg = result.msg;
        this.showAlert(msg);
      }
    },
    closeTip() {
      this.alertShow = false;
      this.alertText = "";
    },
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.loginContainer {
  width: 100%;
  height: 100%;

  .loginInner {
    padding-top: 60px;
    width: 80%;
    margin: 0 auto;

    .login_header {
      .login_logo {
        font-size: 35px;
        font-weight: bold;
        color: black;
        text-align: center;
      }

      .login_header_title {
        padding-top: 10px;
        text-align: center;

        >a {
          color: #333;
          font-size: 14px;
          padding-bottom: 4px;

          &:first-child {
            margin-right: 40px;
          }

          &.on {
            color: #02a774;
            font-weight: 700;
            border-bottom: 2px solid #02a774;
          }
        }
      }
    }

    .login_content {
      position relative
      top 40px
      >form {
        &.on {
          display: block;
        }

        input {
          width: 100%;
          height: 100%;
          padding-left: 10px;
          box-sizing: border-box;
          border: 1px solid #ddd;
          border-radius: 4px;
          outline: 0;
          background-color:transparent
          font: 400 14px Arial;
          outline :none;

          &:focus {
            border: 1px solid #02a774;
          }
        }

        .login_message {
          position: relative;
          margin-top: 16px;
          height: 48px;
          font-size: 14px;
          ::-webkit-input-placeholder {
            /* Webkit browsers */
            color: #675f5f;
            font-size: 16px;
          }

          :-moz-placeholder {
            /* Mozilla Firefox 4 to 8 */
            color: #675f5f;
            font-size: 16px;
          }

          ::moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #675f5f;
            font-size: 16px;
          }

          :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #675f5f;
            font-size: 16px;
          }

          .get_verification {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            border: 0;
            color: #ccc;
            font-size: 14px;
            background: transparent;
            &.right_phone {
              color: black;
            }
          }
        }

        .login_verification {
          position: relative;
          margin-top: 16px;
          height: 48px;
          font-size: 14px;
          ::-webkit-input-placeholder {
            /* Webkit browsers */
            color: #675f5f;
            font-size: 16px;
          }

          :-moz-placeholder {
            /* Mozilla Firefox 4 to 8 */
            color: #675f5f;
            font-size: 16px;
          }

          ::moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #675f5f;
            font-size: 16px;
          }

          :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #675f5f;
            font-size: 16px;
          }

          .switch_button {
            font-size: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            transition: background-color 0.3s, border-color 0.3s;
            padding: 0 6px;
            width: 30px;
            height: 16px;
            line-height: 16px;
            color: #fff;
            background-color #eee
            position: absolute;
            top: 50%;
            right: 6px;
            transform: translateY(-50%);
              .switch_text {
                float: right;
                color: #ddd;
              }


            &.on {
              background: #02a774;
            }

            >.switch_circle {
              position: absolute;
              top: -1px;
              left: -1px;
              width: 16px;
              height: 16px;
              border: 1px solid #ddd;
              border-radius: 50%;
              background: #fff;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
              transition: transform 0.3s;

              &.right {
                transform: translateX(30px);
              }
            }
          }
        }
        .login_hint {
          margin-top: 5px;
          font-size: 13px;
          line-height: 20px;
        }

        .login_submit {
          display: inline-block;
          width: 82%;
          height: 42px;
          margin-top: 10px;
          border-radius: 4px;
          background: #4fa765;
          color: #fff;
          text-align: center;
          font-size: 16px;
          line-height: 42px;
          border: 0;
          margin-left 10%
        }
      }
      }
    }
  }
.van-tabs__nav{
  background-color:transparent !important;
}
</style>
